<template>
<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-button size="default" type="danger" style="background-color: #E1337F;" @click="add()">
				<el-icon><Plus /></el-icon>添加</el-button>
			<div style="width: 100%;"><p style="text-align: center;">商品管理</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>	
		<el-card>
		<div style="width: 100%;">
			<el-table  :data="data.com" border style="width: 100%">
				<el-table-column label="编号" prop="comid" width="100"></el-table-column>
				<el-table-column label="商品名称" prop="comname" width="150"></el-table-column>
				<el-table-column label="商品编号" prop="comsn" width="150"></el-table-column>
				<el-table-column label="商家" prop="user.uid" width="150"></el-table-column>
				<el-table-column label="制造商" prop="makers" width="160"></el-table-column>
				<el-table-column label="生产日期"  width="160">
					<template #default="car">
						{{mytpost(car.row.tmake)}}
					</template>
				</el-table-column>
				<el-table-column label="销量" prop="sales" width="150"></el-table-column>
				<el-table-column label="库存" prop="stock" width="150"></el-table-column>
				<el-table-column label="图片" prop="pic" width="200">
					<template #default="car">
						<el-image style="width: 100px;height: 100px;"
							:src="$ip+`/public/shows/`+car.row.pic" />
						
						</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="car">
						<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="update(car.row.comid)">
							<el-icon><EditPen /></el-icon>更改
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="car">
						<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="del(car.row.comid)">
							<el-icon><DeleteFilled /></el-icon>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-left: 33%;">
							 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
							 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
						  </div>
		</div>
		</el-card>
</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,DeleteFilled} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		
		const data=reactive({
			com:[{comname:""}],
			page:{
				p:0,
				l:5,
				count:0
			}
		})
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		function add(){
			router.push("/adm/addcom")
			
		}
		function update(comid){
			router.push({
				path:"/adm/addcom",
				query:{
					comid:comid
				}
			})
		}
		function del(comid){
			$get("/adm/com/del/"+comid+"/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.com=read.data.data.com
				data.page.count=read.data.data.count
				success(read.data.msg)
			})
		}
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/adm/com/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.com=read.data.data.com
				data.page.count=read.data.data.count
				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		onMounted(()=>{
			
			$get("/adm/com/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				
				data.com=read.data.data.com
				data.page.count=read.data.data.count
				
			})
			
		})
</script>

<style>
</style>
